@import '../../style/mixin.less';

.queue {
  .page();
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  height: 100%;
  overflow: auto;

  .page-header {
    z-index: 1;
  }

  .ant-tabs {
    .ant-tabs-content {
      height: 100%;
    }
    .ant-tabs-tabpane {
      height: 100%;
    }
  }
  .ant-tabs-nav {
    display: none;
  }

  .tabs {
    display: flex;
    gap: 10px 10px;
    flex-wrap: wrap;
    &-container {
      background-color: var(--r-neutral-bg-2, #f5f6fa);
      position: sticky;
      top: 64px;
      padding-bottom: 20px;
      z-index: 10;
    }

    &-item {
      padding: 4px 0;
      font-weight: 400;
      font-size: 13px;
      line-height: 14px;
      color: var(--r-neutral-body);
      position: relative;
      cursor: pointer;

      &.is-active {
        color: var(--r-blue-default, #7084ff);
        &::after {
          position: absolute;
          content: '';
          bottom: 0;
          left: 0;
          right: 0;
          height: 2px;
          background-color: var(--r-blue-default, #7084ff);
        }
      }
    }
  }
  .queue-item {
    background-color: var(--r-neutral-card-1);
    border-radius: 6px;
    padding: 12px;
    padding-bottom: 20px;
    &__time {
      font-size: 12px;
      line-height: 14px;
      color: @color-comment-1;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
    }
    &__info {
      margin-bottom: 20px;
      .tx-explain {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        & > span {
          flex: 1;
          font-weight: 500;
          font-size: 15px;
          line-height: 18px;
          color: var(--r-neutral-title-1);
        }
        .icon-explain {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }
        .tx-explain__view {
          padding: 4px 12px;
          border-radius: 2px;
          font-weight: 500;
          font-size: 13px;
          line-height: 15px;
          color: #ffffff;
          height: auto;
          box-shadow: none !important;
        }
      }
    }
    &__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;

      .ant-btn {
        font-size: 13px;
        border-radius: 4px;
        height: 36px;
        padding: 0;
      }
      .ant-btn-primary[disabled],
      .ant-btn-primary[disabled]:hover,
      .ant-btn-primary[disabled]:focus,
      .ant-btn-primary[disabled]:active {
        background-color: rgba(112, 132, 255, 0.4);
        border: none;
        &:before {
          display: none;
        }
      }

      .submit-btn {
        width: 204px;

        span {
          font-weight: 500;
          font-size: 13px;
          line-height: 15px;
          text-align: center;
        }
      }
      .replace-btn {
        width: 120px;
        &:hover {
          &::before {
            display: none;
          }
          background-color: #8697ff1a !important;
          box-shadow: none;
          color: var(--r-blue-default) !important;
        }
      }
    }
    .tx-confirm {
      background: var(--r-neutral-card-2);
      border-radius: 4px;
      padding: 12px;
      .tx-confirm__head {
        border-bottom: 1px solid var(--r-neutral-line);
        padding-bottom: 8px;
        color: var(--r-neutral-foot);
        font-size: 12px;
        line-height: 14px;
        .number {
          font-weight: 500;
          color: var(--r-neutral-title-1);
        }
      }
      .tx-confirm__list {
        padding-top: 12px;
        margin-bottom: 0;
        li {
          display: flex;
          font-size: 13px;
          line-height: 15px;
          color: var(--r-neutral-foot);
          margin-bottom: 20px;
          align-items: center;
          &:nth-last-child(1) {
            margin-bottom: 0;
          }
          &.checked {
            font-weight: 500;
            color: var(--r-neutral-body);
          }
          .icon-check {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
          .icon-tag {
            height: 16px;
            margin-left: 8px;
          }
        }
      }
    }
    &.canExec {
      &::before {
        display: none;
      }
      .tx-explain__view {
        background-color: rgba(134, 151, 255, 0.2);
        color: var(--r-blue-default, #7084ff);
        border-color: transparent;
        text-shadow: none;
        &:hover {
          background: rgba(134, 151, 255, 0.2) !important;
          background-color: rgba(134, 151, 255, 0.2) !important;
          color: var(--r-blue-default, #7084ff) !important;
        }
        &::before {
          display: none;
        }
      }
    }
  }
  .queue-group {
    background-color: var(--r-neutral-card-1);
    border: 1px solid var(--r-blue-default, #7084ff);
    border-radius: 6px;
    &__header {
      display: flex;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      color: var(--r-blue-default, #7084ff);
      border-bottom: 1px solid var(--r-blue-default, #7084ff);
      padding: 14px 12px;
      .icon-information {
        width: 12px;
        height: 12px;
        margin-right: 6px;
        margin-top: 2px;
      }
    }
    .queue-item {
      border-bottom: 1px solid var(--r-blue-default, #7084ff);
      border-radius: 0;
      margin-bottom: 0;
      background-color: transparent;
      &:nth-last-child(1) {
        border-bottom: none;
      }
    }
  }
  .icon-loading {
    animation: spining 1.5s infinite linear;
  }
  .tx-history__empty {
    // z-index: 0;
    // position: absolute;
    // top: 60px;
    // left: 0;
    // height: calc(100vh - 60px);
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    transform: translateY(-40px);
    .no-data {
      width: 100px;
      height: 100px;
      margin-top: 0;
    }
    .load-faild {
      width: 100px;
      height: 100px;
    }
    .load-faild-desc {
      max-width: 90%;
      padding: 10px 16px;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      color: #ec5151;
      background: rgba(242, 72, 34, 0.1);
      border: 0.5px solid rgba(242, 72, 34, 0.5);
      box-sizing: border-box;
      border-radius: 4px;
      margin-top: 55px;
      margin-bottom: 0;
    }
  }
}
